<template>
  <div class="emp-login">
    <div class="emp-login-left">
      <img src="../../assets/login-logo.jpg" alt="" />
    </div>
    <div class="emp-login-right">
      <h1>酒店管理系统管理端</h1>
      <el-card>
        <h3>欢迎登录</h3>
        <el-form class="ruleForm" :model="loginForm" ref="loginForm" :rules="loginRules">
          <el-form-item>
            <el-select v-model="value" style="width: 100%;">
              <el-option value="1" label="员工">员工</el-option>
              <el-option value="0" label="管理员">管理员</el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input v-model="loginForm.telephone" type="text" placeholder="请输入手机号码" prefix-icon="el-icon-mobile-phone"
              v-if="value == '1'"></el-input>
            <el-input v-model="loginVo.username" type="text" placeholder="请输入账号" prefix-icon="el-icon-mobile-phone"
              v-else></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" show-password
              prefix-icon="el-icon-lock" v-if="value == '1'"></el-input>
            <el-input v-model="loginVo.password" type="password" placeholder="请输入密码" show-password
              prefix-icon="el-icon-lock" v-else></el-input>
          </el-form-item>
          <el-form-item prop="Vcode" style="margin-bottom: 10px;">
            <el-input type="text" placeholder="验证码" style="width: 180px" v-model="loginForm.Vcode"></el-input>
            <img :src="Vcode" alt="image" @click="refreshVcode"
              style="width: 100px;height: auto; vertical-align: middle;margin-left: 30px;" />
            <!-- <img src="../../assets/img-code.png" alt="" style="height: 30px; vertical-align: middle;"> -->
          </el-form-item>
          <el-form-item class="about-pass" style="margin: 0px auto;">
            <el-checkbox v-model="checked" style="margin-right: 180px;">记住密码</el-checkbox>
            <span style="cursor: pointer;" @click="dialogVisible = true" v-if="value == 1">忘记密码</span>
          </el-form-item>
          <el-form-item>
            <el-button class="login-btn" type="primary" size="small" style="width: 300px; height: 35px"
              @click="login">登录</el-button>
            <!-- <el-button class="login-btn" type="primary" size="small" style="width: 300px; height: 35px" @click="goGitee"
              v-if="value == 0">Gitee </el-button> -->
          </el-form-item>
          <el-form-item class="about-pass" style="margin: -20px auto;" v-if="value == 0">
            <span style="vertical-align:middle">第三方登录:</span>
            <img src="../../assets/gitee.jpg" width="22" height="22" style="vertical-align:middle;margin-left: 10px;"
              @click="goGitee" title="Gitee">
          </el-form-item>
        </el-form>
      </el-card>

      <el-dialog title="忘记密码" :visible.sync="dialogVisible" width="25%" :before-close="handleClose">
        <el-form size="mini" :model="resetForm" ref="resetForm">
          <el-form-item label="邮箱地址" prop="email">
            <el-input v-model="resetForm.email" type="email"></el-input>
          </el-form-item>
          <el-form-item label="邮箱验证码" prop="Vcode">
            <el-input v-model="resetForm.Vcode" type="text"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="sendForgetCode" :disabled="disabledbtn">{{ second === totalSecond ?
              '获取验证码'
              : second + '秒后重新发送' }}</el-button>
            <el-button type="primary" @click="resetPassword">确认重置</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getForgetCode } from '@/api/common'
import { login as adminLogin, callback, oauth, who } from '@/api/admin'
import { forgetEmployeePassword, login } from '@/api/employee'
export default {
  data () {
    return {
      disabledbtn: false,
      timer: '',
      second: 10,
      totalSecond: 10,
      value: '1',
      Vcode: '',
      checked: true,
      name: '',
      dialogVisible: false,
      loginForm: {
        telephone: '',
        password: '',
        Vcode: ''
      },
      loginVo: {
        username: '',
        password: ''
      },
      resetForm: {
        email: '',
        Vcode: ''
      },
      loginRules: {
        // telephone: [
        //   {
        //     required: true,
        //     message: '请输入手机号码',
        //     trigger: 'blur'
        //   },
        //   {
        //     pattern: /^1[3-9]\d{9}$/,
        //     message: '手机号码格式不对',
        //     trigger: 'blur'
        //   }
        // ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 16,
            message: '密码长度应该为6-16位之间',
            trigger: 'blur'
          }
        ],
        resetForm: {
          email: '',
          Vcode: ''
        }
        // resetPassRules: {
        //   email: [
        //     {
        //       required: true,
        //       message: '请输入邮箱地址',
        //       trigger: 'blur'
        //     },
        //     {
        //       pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
        //       message: '邮箱地址格式不对',
        //       trigger: 'blur'
        //     }
        //   ],
        //   Vcode: [
        //     {
        //       required: true,
        //       message: '请输入验证码',
        //       trigger: 'blur'
        //     }
        //   ]
        // }
      }
    }
  },
  created () {
    if (localStorage.getItem('Premium Hotel System')) {
      localStorage.removeItem('Premium Hotel System')
      this.$message.success('退出登录成功')
    }
    this.Vcode = process.env.VUE_APP_BASE_URL + 'Vcode'
  },
  mounted () {
    if (this.$route.query.who) {
      who(this.$route.query.who).then(res => {
        localStorage.setItem('Premium Hotel System', res)
        this.$message.success('登录成功')
        this.$router.replace({ path: '/admin/home' })
      })
    } else if (this.$route.query.err === 'error') {
      this.$message.error('登录失败')
    }
  },
  methods: {
    refreshVcode () {
      this.Vcode = process.env.VUE_APP_BASE_URL + 'Vcode?' + new Date().getTime()
    },
    login () {
      if (this.value == 1) {
        login(this.loginForm.Vcode, this.loginForm).then(res => {
          // console.log(res)
          localStorage.setItem('Premium Hotel System', res)
          this.$router.push({ path: '/employee/home' })
          this.$message.success('登录成功')
        }).catch(err => {
          this.$message.error('登录失败')
        })
      } else {
        adminLogin(this.loginForm.Vcode, this.loginVo).then(res => {
          localStorage.setItem('Premium Hotel System', res)
          this.$router.push({ path: '/admin/home' })
          this.$message.success('登录成功')
        }).catch(err => {
          this.$message.error('登录失败')
        })
      }
    },
    sendForgetCode () {
      if (!this.resetForm.email) {
        this.$message({
          message: '请输入邮箱地址',
          type: 'warning'
        })
        return false
      }
      if (!this.timer && this.second === this.totalSecond) {
        this.disabledbtn = true
        this.getForgetCode()
        this.timer = setInterval(() => {
          this.second--
          if (this.second < 1) {
            clearInterval(this.timer)
            this.timer = null
            this.second = this.totalSecond
            this.disabledbtn = false
          }
        }, 1000)
      }
    },
    // 发送验证码接口
    async getForgetCode () {
      console.log(this.resetForm.email)
      const res = await getForgetCode(this.resetForm.email)
      this.$message(
        {
          message: res,
          type: 'success'
        }
      )
    },
    // 重置密码
    resetPassword () {
      // console.log(this.resetForm.email, this.resetForm.Vcode)
      this.$refs.resetForm.validate(async (value) => {
        console.log(value)
        if (value) {
          this.forgetPassword()
          this.dialogVisible = false
        }
      })
    },
    // 重置密码接口
    async forgetPassword () {
      const res = await forgetEmployeePassword(this.resetForm.email, this.resetForm.Vcode)
      this.$message({
        type: 'success',
        message: res
      })
    },
    handleClose () {
      this.dialogVisible = false
    },
    goGitee () {
      oauth().then(res => {
        console.warn(res)
        window.location.href = res
      })
    }
  }
}
</script>
<style lang="less" scoped>
.emp-login {
  height: 100vh;
  display: flex;
  width: 100%;
  position: fixed;
  // top: 0;
  right: 0;
  // bottom: 0;
  .emp-login-left {
    img {
      transform: translate(40%, 20%);
      width: 512px;
    }
  }
  .emp-login-right {
    display: flex;
    flex-direction: column;
    margin-top: 50px;
    margin-left: 300px;
    h1 {
      text-align: center;
      margin-bottom: 50px;
    }
    .el-card {
      width: 360px;
      height: 440px;

      // border: 1px solid red;
      h3 {
        text-align: center;
        margin-bottom: 30px;
      }
    }
  }
}
</style>
